---
name: useToggle
route: /useToggle
menu: 'State'
edit: false
sidebar: true
---
import JackBox from 'jackbox';

import Demo1 from './demo/demo1';
import Demo1CodeTsx from '!raw-loader!./demo/demo1.tsx';
import Demo1CodeJsx from '!raw-loader!./demo/demo1.jsx';
import Demo2 from './demo/demo2';
import Demo2CodeTsx from '!raw-loader!./demo/demo2.tsx';
import Demo2CodeJsx from '!raw-loader!./demo/demo2.jsx';

# useToggle

A hook that switch value between two states.

## Examples

### Default usage

<JackBox jsCode={Demo1CodeJsx} tsCode={Demo1CodeTsx} demoName='Default usage' description='use boolean value as default，use it as same as useBoolean.'>
  <Demo1 />
</JackBox>

### Advanced usage

<JackBox jsCode={Demo2CodeJsx} tsCode={Demo2CodeTsx} demoName='Advanced usage' description='Accept two parameters, switch between them.'>
  <Demo2 />
</JackBox>

## API

```javascript
const {
  state, 
  toggle,
  setLeft,
  setRight
} = useToggle(
  defaultValue?: boolean,
);

const {
  state, 
  toggle,
  setLeft,
  setRight
} = useToggle(
  defaultValue: any = false,
  reverseValue?: any,
);
```

### Result

| Property | Description                                         | Type                 |
|----------|--------------------------------------|----------------------|
| state  | state value                         | boolean              |
| toggle | Trigger state change, accept two optional parameters | (defaultValue: any = false, reverseValue?: any) => void |
| setLeft | Set default value | () => void |
| setRight | Set reverse value | () => void |

### Params

| Property | Description                                 | Type                   | Default |
|---------|----------------------------------------------|------------------------|--------|
| defaultValue | Optional，set a default value  | number \| string \| boolean \| undefined | false      |
| reverseValue | Optional，set a reverse value  | number \| string \| boolean \| undefined | -      |